<template>
  <div>
    <div class="serach">
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input size="small" v-model="query.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="客户手机">
              <el-input size="small" v-model="query.phone"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="归属人">
              <el-input size="small" v-model="query.owner"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item size="small" label="跟进时间">
              <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn" style="display: flex">
        <el-button type="primary" icon="el-icon-plus" plain @click="addbus">增加</el-button>
        <el-button type="success" icon="el-icon-edit-outline" :disabled="delId.length != 1" plain
          @click="updateBusiness(null)">修改</el-button>
        <el-button type="danger" icon="el-icon-delete" plain :disabled="delId.length == 0"
          @click="delBusiness(null)">删除</el-button>
      </div>
      <el-dialog :title=title :visible.sync="dialogVisible" width="50%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="渠道来源">
                <el-select size="small" v-model="ruleForm.channelId" placeholder="请选择" @change="channelChange">
                  <el-option v-for="item in options" :key="item.value" :label="item.channelName"
                    :value="item.channelId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动信息">
                <el-select size="small" v-model="ruleForm.activityId" placeholder="请选择">
                  <el-option v-for="item in actOption" :key="item.value" :label="item.name" :value="item.activityId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户性别">
                <el-radio-group v-model="ruleForm.gender">
                  <el-radio v-for="(item, index) in sex" :key="index" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户年龄">
                <el-input-number size="small" v-model="ruleForm.age" :min="18" :max="100" label="年龄"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="微信号">
                <el-input v-model="ruleForm.weixin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ号">
                <el-input v-model="ruleForm.qq"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div class="table" style="margin-top: 20px">
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="客户姓名" width="80">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="owner" label="商机归属"> </el-table-column>
          <el-table-column prop="status" label="商机状态">
            <template v-slot="scope">
              <!-- 当前行的信息 -->
              <!-- {{ scope.row }} -->
              <el-tag v-if="scope.row.status == 1">已分配</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success">跟进中</el-tag>
              <el-tag type="info" v-if="scope.row.status == 0">未知</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 4">伪线索</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 3">回收</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="nextTime" label="下次跟进时间" width="180">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="scope">
              <el-button size="mini" @click.native="updateBusiness(scope.row.businessId)"> 修改</el-button>
              <el-button type="danger" size="mini" @click.native="delBusiness(scope.row.businessId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <page :total="total" :page="query.pageNum" @size="setSize" @current="setCurrent"></page>
      </div>
    </div>
  </div>
</template>

<script>
import { businessList, addBusiness, channels, actBus, delBus, updatedBus, upBus } from '@/api/business'
import page from '@/components/page.vue'
export default {
  components: {
    page
  },
  data() {
    return {
      dialogVisible: false,
      id: null,
      tableData: [],
      options: [],
      statusOption: [],
      actOption: [],
      value: "",
      value1: "",
      title: '',
      delId: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        phone: null,
        owner: null,
        channelId: null,
        status: null,
      },
      sex: [
        {
          label: "男",
          value: 0,
        },
        {
          label: "女",
          value: 1,
        },
        {
          label: "未知",
          value: 2,
        },
      ],
      ruleForm: {
        name: "",
        phone: "",
        gender: 0,
        activityId: "",
        channelId: "",
        age: 1,
        weixin: "",
        qq: "",
      },
      total: 0,
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        phone: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      }
    }
  },
  created() {
    this.getList()
    this.channelsBus()
  },
  methods: {
    //修改
    updateBusiness(val) {
      this.dialogVisible = true
      this.title = '修改'
      if (val) {
        this.delId[0] = val
      }
      updatedBus(this.delId).then(async (res) => {
        this.ruleForm.name = res.data.name
        this.ruleForm.gender = res.data.gender
        this.ruleForm.phone = res.data.phone
        this.ruleForm.qq = res.data.qq
        this.ruleForm.weixin = res.data.weixin
        this.ruleForm.age = res.data.age
        if (res.data.channelId) {
          this.ruleForm.channelId = res.data.channelId
          //加await的原因 等待执行后 再执行下方的代码
          await this.channelChange(res.data.channelId)
          this.ruleForm.activityId = res.data.activityId
        }
      })
    },
    //删除
    delBusiness(val) {
      let id = val ? val : this.delId
      this.$confirm(`此操作将永久删除编号为${id}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        delBus(id).then(res => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })
        .catch(err => {
          this.$message({
            type: 'error',
            message: err.message
          });
        })
    },
    handleSelectionChange(val) {
      this.delId = []
      for (const item of val) {
        this.delId.push(item.businessId)
      }
    },
    // 渠道来源
    channelsBus() {
      channels().then(res => {
        this.options = res.data
      })
    },
    channelChange(val) {
      this.ruleForm.activityId = null
      actBus(val).then(res => {
        this.actOption = res.data
      })
    },
    //增加
    addbus() {
      this.dialogVisible = true
      this.title = '增加'
      this.$nextTick(() => {
        //重置表单及校验
        this.$refs.ruleForm.resetFields();
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == '增加') {
            addBusiness(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getList()
                this.$refs[formName].resetFields();
              }
            })
              .catch(err => {
                this.$message({
                  message: err.message,
                  type: 'error'
                })
              })

          } else {
            let data = {
              businessId: this.delId[0],
              ...this.ruleForm
            }
            upBus(data).then(res => {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.getList()
            })
              .catch(res => {

              })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.ruleForm.channelId = null
      this.ruleForm.activityId = null
    },

    getList() {
      businessList(this.query).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    setSize(val) {
      // console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.query.pageNum = 1;
      //重新调用接口
      this.getList();
    },
    setCurrent(val) {
      // console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      //重新调用接口
      this.getList();
    },
    //查询
    handleSearch() {
      this.query.pageNum = 1;
      this.getList()
    },
    //重置
    reset() {
      this.query.pageNum = 1;
      this.query.pageSize = 10;
      this.query.channelId = null;
      this.query.name = null;
      this.query.owner = null;
      this.query.phone = null;
      this.query.status = null;
      this.getList();
    }
  }
}
</script>

<style lang="scss" scoped></style>